<script setup lang="ts">
import { searchConfig } from './config/search-config';
import { tableConfig } from './config/table-config';
import { doGetProductionList } from '@/api/bulletin/shopProduction/index';
import { getDom } from '@/utils';
import { formatNumber } from '@/utils/common';
import type {
    ShopProductionLoadProp,
    ShopProductionLoadResponse
} from '@/api/bulletin/shopProduction/model/type';

defineOptions({
    name: 'ShopProductionList'
});

// 默认组件高度处理方式
const tableRef = ref<TableRef>();
const searchRef = ref<SearchRef>();

// 获取数据相关
const columnHeaders = ref<string[]>([]);

//路由信息
const router = useRouter();

/**
 *@: 详情跳转
 */
const handRow = (row: ShopProductionLoadProp, item?: string) => {
    let query = {};
    if (item !== undefined) {
        query = {
            workshopCode: row.workshopCode,
            workshopName: row.workshopName,
            workshopId: row.workshopId,
            time: item,
            start: columnHeaders.value[0],
            end: columnHeaders.value[columnHeaders.value.length - 1]
        };
    } else {
        query = {
            workshopCode: row.workshopCode,
            workshopName: row.workshopName,
            workshopId: row.workshopId,
            start: columnHeaders.value[0],
            end: columnHeaders.value[columnHeaders.value.length - 1]
        };
    }
    router.push({ path: '/shopProductionDetails', query });
};

/**
 *@: 对接口返回数据的处理
 */
const tableData = ref<ShopProductionLoadProp[]>([]);
const handleTableData = (data: ShopProductionLoadResponse) => {
    columnHeaders.value = data.header || [];
    const records = data.rows.records || [];
    tableData.value = records;
    // 计算表格阴影和图标的动态位置
    const time = setTimeout(() => {
        if (!workshopNameParent || !workshopCodeParent) getParentElement();
        init();
        dynamicPosKalcula();
        clearTimeout(time);
    }, 100);
    return records;
};

/**
 * @: 初始化宽度
 */
const workshopLeft = ref(0);
const workshopCodeLeft = ref(0);
const workshopNameRef = ref<Element>();
const workshopCodeRef = ref<Element>();
const init = () => {
    nextTick(() => {
        if (isShow.value) {
            workshopLeft.value = getLeft(workshopNameParent);
        } else {
            workshopCodeLeft.value = getLeft(workshopCodeParent);
        }
    });
};

/**
 * @:获取dom
 */
let workshopNameParent: Element;
let workshopCodeParent: Element;
const getParentElement = () => {
    workshopNameParent = workshopNameRef.value?.parentNode?.parentNode?.parentNode as Element;
    workshopCodeParent = workshopCodeRef.value?.parentNode?.parentNode as Element;
};

/**
 * @: 获取传入dom的宽度 + 位置
 */
const getLeft = (ele: Element) => {
    const boxStyle = window.getComputedStyle(ele);
    return (ele as HTMLElement).offsetLeft + parseInt(boxStyle.width) - 60 + 18; // 60 图标宽度  18 左移距离
};

/**
 *@: 表格收起和展开的控制
 */
const isShow = ref(true);
const isActive = () => {
    isShow.value = !isShow.value;
    tableRef.value?.tableItems.forEach(item => {
        if (item.modelKey === 'workshopCode') return;
        item.columnProps!.width = isShow.value ? 120 : 0;
        item.columnProps!.fixed = isShow.value;
    });
    setTimeout(() => {
        init();
    }, 200);
};
/**
 * @: 表格图标和阴影定位位置计算
 */
const iconBoxTop = ref('0px');
const dynamicPosKalcula = () => {
    // 拿到表格各种元素信息
    let tableScrollbar = getDom('.m-table__scrollbar')?.getBoundingClientRect();
    let tableHeader = getDom('.el-table__header-wrapper')?.getBoundingClientRect();

    // 拿到元素信息相对与边框的各个距离
    let tableHeaderTop = tableHeader?.bottom || 0;
    let tableScrollbarBottom = tableScrollbar?.top || 0;

    // 对表格展开收缩图标的定位计算
    if (tableData.value.length > 4) {
        iconBoxTop.value = (tableScrollbarBottom - tableHeaderTop) / 2 + 40 + 'px'; // 40 表头高度
    } else {
        iconBoxTop.value = (tableData.value.length * 113) / 2 + 40 + 'px';
    }
};
</script>
<template>
    <q-page>
        <base-search ref="searchRef" :search-config="searchConfig" :table-ref="tableRef">
        </base-search>

        <base-table
            ref="tableRef"
            :table-attr="{ showOverflowTooltip: false }"
            height="490"
            customDataKey="rows"
            :table-config="tableConfig"
            :showSetting="false"
            :handleTableData="handleTableData"
            :getDataFn="doGetProductionList"
            :close-edit="true"
            :hide-del="true"
            :border="false"
        >
            <!-- 车间编码 -->
            <template #workshopCode="{ item }">
                <el-table-column
                    min-width="120"
                    :show-overflow-tooltip="false"
                    class-name="workshopCode"
                    v-bind="item.columnProps"
                >
                    <template #header>
                        {{ item.columnProps?.label }}
                        <div
                            v-show="!isShow && tableData.length"
                            ref="workshopCodeRef"
                            class="m-shadow"
                            style="right: 0"
                            @click.stop="isActive()"
                        ></div>
                    </template>
                    <template #default="{ row }">
                        {{ row.workshopCode }}
                        <div
                            v-show="!isShow && tableData.length"
                            class="m-shadow"
                            style="right: 0"
                            @click.stop="isActive()"
                        ></div>
                    </template>
                </el-table-column>
            </template>
            <!-- 车间名称 -->
            <template #workshopName="{ item }">
                <el-table-column
                    :show-overflow-tooltip="false"
                    class-name="workshopName"
                    min-width="120"
                    v-bind="item.columnProps"
                >
                    <template #header>
                        <div v-show="isShow">
                            {{ item.columnProps?.label }}
                            <div
                                v-show="tableData.length"
                                ref="workshopNameRef"
                                class="m-shadow"
                                style="right: 0"
                                @click.stop="isActive()"
                            ></div>
                        </div>
                    </template>
                    <template #default="{ row }">
                        <div v-show="isShow">
                            {{ row.workshopName }}
                            <div
                                v-show="tableData.length"
                                class="m-shadow"
                                style="right: 0"
                                @click.stop="isActive()"
                            ></div>
                        </div>
                    </template>
                </el-table-column>
            </template>
            <!-- 表格收起和展开的控制 -->
            <template v-if="tableData.length" #custom>
                <div
                    v-show="isShow && workshopLeft"
                    class="m-icons"
                    :style="{ left: workshopLeft + 'px', top: iconBoxTop }"
                    @click.stop="isActive()"
                >
                    <q-icon size="60" icon-class="suofang" />
                </div>

                <div
                    v-show="!isShow && workshopCodeLeft"
                    class="m-icons"
                    :style="{ left: workshopCodeLeft + 'px', top: iconBoxTop }"
                    @click.stop="isActive()"
                >
                    <q-icon size="60" icon-class="zhankai3" />
                </div>
            </template>
            <!-- 动态表格配置 -->
            <template #tableColumnSlot>
                <el-table-column
                    v-for="item in columnHeaders"
                    :key="item"
                    :resizable="false"
                    cellClassName="no-resize"
                    :label="item"
                    min-width="120px"
                >
                    <template #default="{ row }: SlotData<ShopProductionLoadProp>">
                        <el-tooltip effect="dark" placement="left">
                            <template #content>
                                <div>
                                    计划数量：{{ row.dailyStatisticsMap[item].plannedCnt || 0 }}
                                </div>
                                <div>
                                    已排产设备:{{
                                        row.dailyStatisticsMap[item].scheduledEquipmentCnt
                                    }}
                                </div>
                                <div>
                                    未排产设备:{{
                                        row.dailyStatisticsMap[item].unscheduledEquipmentCnt
                                    }}
                                </div>
                            </template>
                            <div
                                v-if="row.dailyStatisticsMap[item]"
                                class="m-cell"
                                @click.stop="handRow(row, item)"
                            >
                                <div class="m-cellBox">
                                    <div class="m-cellBox__common">
                                        <span>
                                            <q-icon
                                                icon-class="blueRectangle"
                                                size="40px"
                                                class="m-cellBox__common--rectangleLeft"
                                            />
                                        </span>

                                        <div class="m-cellBox__common-direction">
                                            <div
                                                class="m-cellBox__common--typefaceSize m-cellBox__height"
                                            >
                                                计划数量
                                            </div>
                                            <div class="m-cellBox__common--productionSchedule">
                                                {{
                                                    formatNumber(
                                                        row.dailyStatisticsMap[item]?.plannedCnt
                                                    ) || 0
                                                }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="m-cellBox__partingLine"></div>
                                    <div class="m-cellBox__common m-cellBox__height">
                                        <span class="m-cellBox__common--size">已排产设备</span
                                        ><span class="m-cellBox__common--leftNumbers">
                                            {{
                                                formatNumber(
                                                    row.dailyStatisticsMap[item]
                                                        ?.scheduledEquipmentCnt
                                                ) || 0
                                            }}</span
                                        >
                                    </div>
                                    <div class="m-cellBox__common m-cellBox__height">
                                        <span class="m-cellBox__common--size">未排产设备</span
                                        ><span class="m-cellBox__common--leftNumbers">{{
                                            formatNumber(
                                                row.dailyStatisticsMap[item]
                                                    ?.unscheduledEquipmentCnt
                                            ) || 0
                                        }}</span>
                                    </div>
                                </div>
                            </div>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </template>
            <template #action="{ row }: SlotData<ShopProductionLoadProp>">
                <el-link type="primary" @click="handRow(row)"> 任务详情 </el-link>
            </template>
        </base-table>
    </q-page>
</template>

<style scoped lang="scss">
@include share-rule(position) {
    position: absolute;
    top: 0;
}

@include share-rule(cursor) {
    z-index: 12;
    cursor: pointer;
}

@include share-rule(font-size) {
    font-size: 12px;
    font-weight: 400;
}

// 阴影样式
@include b(m-shadow) {
    @include extend-rule(position);
    @include extend-rule(cursor);

    width: 24px;
    height: 100%;
    background: linear-gradient(270deg, rgb(238 238 238), rgb(255 255 255 / 0%) 100%);
    @include when(dark) {
        cursor: pointer;
        opacity: 0.2;
    }
}

@include b(m-icons) {
    position: absolute;
    transform: translateY(-50%);
    @include extend-rule(cursor);
}

// 单元格的样式
@include b(m-cell) {
    position: relative;
    display: flex;
    align-items: center;
    height: 96px;
    cursor: pointer;

    &:hover::before {
        @include extend-rule(position);
        @include flex();

        left: 0;
        min-width: 105px;
        height: 100%;
        font-size: 14px;
        color: #fff;
        content: '点击查看详情';
        background-color: rgb(0 0 0 / 30%);
        border-radius: 4px;
    }
}

// 单元格里面盒子的样式
@include b(m-cellBox) {
    min-width: 105px;
    height: 96px;
    padding: 5px;
    @include extend-rule(font-size);

    text-align: right;
    border: 1px solid #06f3;

    // 动态表格公共样式
    @include e(common) {
        display: flex;
        justify-content: space-between;
        // 左边图标定位
        @include m(rectangleLeft) {
            @include extend-rule(position);

            left: -18px;
        }

        // 右边图标定位
        @include m(rectangleRight) {
            @include extend-rule(position);

            left: 96px;
        }

        // 生产进度和关联订单数字体
        @include m(typefaceSize) {
            @include extend-rule(font-size);
        }

        // 公共字体大小
        @include m(size) {
            font-size: 12px;
        }

        // 左边数据的字体
        @include m(leftNumbers) {
            @include extend-rule(font-size);

            color: rgb(0 102 255);
        }

        // 右边数据的字体
        @include m(rightNumbers) {
            @include extend-rule(font-size);

            color: rgb(0 165 39);
        }

        // 生产进度数据样式
        @include m(productionSchedule) {
            height: 17px;
            @include extend-rule(font-size);

            color: rgb(0 102 255);
        }

        // 关联订单数数据样式
        @include m(order) {
            height: 17px;
            @include extend-rule(font-size);

            color: rgb(0 165 39);
        }
    }

    // 蓝色分割线
    @include e(partingLine) {
        margin: 8px 0 3px;
        border: 1px dashed rgb(0 102 255);
    }

    // 绿色分割线
    @include e(partingLineGreen) {
        margin: 8px 0 3px;
        border: 1px dashed rgb(0 165 39);
    }

    // 公共的高度
    @include e(height) {
        height: 18px;
    }
}

// 盒子间距
@include b(entry) {
    width: 10px;
}
</style>
